<template>
	<view class="career-box">
		<view class="career-item">
			<view class="top">
				<view class="left">
					<image class="avatar" :src="$mConfig.imageUrl + '/image/shop-logo.png'"></image>
					<view class="company">
						<view class="title">
							山西洪城运人力资源有限公司
						</view>
						<view class="time">
							2024-09-04 21:34:05
						</view>
					</view>
				</view>
			</view>
			<view class="career-desc">
				高价位招聘普工，抓紧复制下面链接报名
			</view>
			<image class="banner" src="https://via.placeholder.com/100x200.png/3c9cff/fff" mode="scaleToFill"></image>
			<view class="career-info">
				<view class="career-info-left">
					<text class="title">太原市公司招聘一线普工（无需 经验)</text>
					<text class="tag tag1">代招</text>
					<text class="tag tag2">派遣</text>
					<text class="tag tag3">急聘</text>
				</view>
				<view class="career-info-right">
					<text class="time">300/天 </text>
					<text class="yzb yzb-next icon-next" v-show="!isLook"></text>
				</view>
			</view>
			<view class="address">
				<text>太原市 小店区 范岗镇</text>
				<view class="welfare">
					学历不限
				</view>
				<view class="welfare welfare-active">
					日结工资
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			isLook:{
				type:Boolean,
				default:false
			}
		},
		data() {
			return {

			}
		}
	}
</script>

<style lang="scss" scoped>
	.career-box {
		overflow: hidden;

		.career-item {
			background-color: #fff;
			padding: 40rpx 35rpx;
			margin-top: 20rpx;
			border-radius: 10rpx;

			.top {
				display: flex;
				justify-content: space-between;

				.left {
					display: flex;
					align-items: center;

					.avatar {
						width: 87rpx;
						height: 87rpx;
						flex-shrink: 0;
					}

					.company {
						margin-left: 20rpx;

						.title {
							font-weight: 800;
							font-size: 32rpx;
							color: #111111;
						}

						.time {
							margin-top: 18rpx;
							font-size: 26rpx;
							color: #222222;
						}
					}
				}

				.btn {
					width: 100rpx;
					height: 46rpx;
					background: #FFE2DF;
					border-radius: 23rpx;
					margin-left: 20rpx;
					font-weight: bold;
					font-size: 24rpx;
					color: #FF6656;
					line-height: 46rpx;
					text-align: center;
				}

				.btn-active {
					background-color: #EFEFEF;
					color: #AAAAAA;
				}
			}

			.career-desc {
				// font-weight: 500;
				font-size: 28rpx;
				color: #222222;
				margin-top: 26rpx;
				margin-bottom: 29rpx;
			}

			.banner {
				width: 636rpx;
				height: 361rpx;
				background: #F5F5F5;
				border-radius: 16rpx;
			}

			.career-info {
				display: flex;
				justify-content: space-between;
				margin-top: 36rpx;

				.career-info-left {
					margin-right: 37rpx;
					width: 430rpx;

					.title {
						font-weight: 800;
						font-size: 32rpx;
						color: #111111;
						margin-right: 10rpx;
						line-height: 46rpx;
					}

					.tag {
						display: inline-block;
						padding: 4rpx 10rpx;
						font-weight: bold;
						font-size: 20rpx;
						border-radius: 6rpx;
						margin-right: 8rpx;
					}

					.tag1 {
						border: 1px solid rgba(30, 115, 255, 0.5);
						color: rgba(30, 115, 255, 0.5);
					}

					.tag2 {
						color: rgba(21, 151, 82, 0.5);
						border: 1px solid rgba(21, 151, 82, 0.5);
					}

					.tag3 {
						color: rgba(255, 42, 0, 0.5);
						border: 1px solid rgba(255, 42, 0, 0.5);
					}
				}

				.career-info-right {
					display: flex;

					.time {
						font-weight: 800;
						font-size: 32rpx;
						color: #348FFF;
					}

					.icon-next {
						padding-top: 30rpx;
						color: #3B4552;
						font-weight: bold;
						margin-left: 34rpx;
						font-size: 36rpx;
					}
				}
			}

			.address {
				margin-top: 26rpx;

				text {
					font-weight: 500;
					font-size: 26rpx;
					color: #999999;
					margin-right: 34rpx;
				}

				.welfare {
					display: inline-block;
					font-weight: 500;
					font-size: 24rpx;
					color: #888888;
					padding: 10rpx 15rpx;
					background: #F3F5FA;
					border-radius: 10rpx;
					margin-right: 20rpx;
				}

				.welfare-active {
					color: #4B9BFF;
				}
			}
		}
	}
</style>